<template>
  <div id="app">
    <div id="head">
      <div id="logo">
      <router-link to="/">SUSteam</router-link>
      </div>
      <nav_header id="menu" :path="this.$route.path"></nav_header>
      <user_bar></user_bar>
    </div>
    <router-view/>
  </div>
</template>

<style>
* {
	/*color: black;*/
}

body {
  height: 100%;
  background-color: #4e4e4e;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  color: #2c3e50;
}

#head{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: #343434;
}

#logo {
  margin: 1%;
  text-align: left;
}

#logo a {
  color: white;
  font-size: 200%;
  text-decoration: none;
}

</style>

<script>
import nav_header from "@/components/nav_header";
import user_bar from "@/components/user_bar";

export default {
  components: {
    nav_header, user_bar
  }
}
</script>